<template>
  <div class="total">
    <!-- 导航栏 -->
    <div class="head">
      <el-button type="success" round style="float: left; margin: 20px 0 20px 150px" @click="back">返回</el-button>
      <ul class="list">
        <li class="top" v-for="(item, index) in title" :key="index">
          <router-link :to="item.path">
            <i :class="item.icon"></i>
            {{ item.name }}
          </router-link>
        </li>
      </ul>
    </div>
    <!-- 轮播图 -->
    <div class="carousel">
      <h3 class="title">最美季节评选</h3>
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="(img, index) in images" :key="index">
            <img :src="img" alt="" />
          </div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>

        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
      </div>
    </div>
    <!-- 介绍规则 -->
    <div class="introduce">
      <!-- 数据统计 -->
      <div class="data">
        <div>
          <el-row :gutter="20">
            <el-col :span="8" v-for="(title,index) in data" :key="index">
              <div class="sta">
                <el-statistic
                group-separator=","
                :precision="2"
                :value="getValue(index)"
                :title="title"
              ></el-statistic>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
      <!-- 投票规则 -->
      <div class="rule">
        <h3 class="tit">—— 活动规则 ——</h3>
        <ul>
          <li class="rlist" v-for="(tit,index) in rule" :key="index">
            <i :class="tit.icon">
              {{ tit.name }}
              {{ tit.value }}
            </i>
          </li>
        </ul>
        <!-- <div class="text">
          <h3>济南的冬天</h3> <span>作者：老舍</span>
          <p>  对于一个在北平住惯的人，像我，冬天要是不刮大风，便是奇迹；济南的冬天是没有风声的。对于一个刚由伦敦回来的，像我，冬天要能看得见日光，便是怪事；济南的冬天是响晴的。自然，在热带的地方，日光是永远那么毒，响亮的天气，反有点叫人害怕。可是，在北中国的冬天，而能有温晴的天气，济南真得算个宝地。 [1] 设若单单是有阳光，那也算不了出奇。请闭上眼睛想：一个老城，有山有水，全在天底下晒着阳光，暖和安适地睡着，只等春风来把它们唤醒，这是不是个理想的境界？ 小山整把济南围了个圈儿，只有北边缺着点口儿。这一圈小山在冬天特别可爱，好像是把济南放在一个小摇篮里，它们全安静不动地低声地说：“你们放心吧，这儿准保暖和。”真的，济南的人们在冬天是面上含笑的。他们一看那些小山，心中便觉得有了着落，有了依靠。他们由天上看到山上，便不知不觉地想起：“明天也许就是春天了吧？这样的温暖，今天夜里山草也许就绿起来了吧？”就是这点幻想不能一时实现，他们也并不着急，因为有这样慈善的冬天，干啥还希望别的呢！
                    最妙的是下点小雪呀。看吧，山上的矮松越发的青黑，树尖上顶着一髻儿白花，好像日本看护妇。山尖全白了，给蓝天镶上一道银边。山坡上，有的地方雪厚点，有的地方草色还露着，这样，一道儿白，一道儿暗黄，给山们穿上一件带水纹的花衣；看着看着，这件花衣好像被风儿吹动，叫你希望看见一点更美的山的肌肤。等到快日落的时候，微黄的阳光斜射在山腰上，那点薄雪好像忽然害了羞，微微露出点粉色。就是下小雪吧，济南是受不住大雪的，那些小山太秀气！ 古老的济南，城里那么狭窄，城外又那么宽敞，山坡上卧着些小村庄，小村庄的房顶上卧着点雪，对，这是张小水墨画，也许是唐代的名手画的吧。
                    那水呢，不但不结冰，倒反在绿萍上冒着点热气，水藻真绿，把终年贮蓄的绿色全拿出来了。天儿越晴，水藻越绿，就凭这些绿的精神，水也不忍得冻上，况且那些长枝的垂柳还要在水里照个影儿呢！看吧，由澄清的河水慢慢往上看吧，空中，半空中，天上，自上而下全是那么清亮，那么蓝汪汪的，整个的是块空灵的蓝水晶。这块水晶里，包着红屋顶，黄草山，像地毯上的小团花的灰色树影。这就是冬天的济南。</p>
        </div> -->
      </div>
    </div>
    <!-- 投票模块 -->
    <div class="vote">
      <el-button type="success" class="paiming" @click="more"> <i class="el-icon-trophy"></i> 查看排名</el-button> <br>
        <el-input
          class="search"
          placeholder="请输入内容"
          prefix-icon="el-icon-search"
          v-model="input2">
        </el-input> <el-button class="search-but" type="success">搜索</el-button>
      
      <div class="images">
        <ul>
          <li v-for="(text,index) in ruleImg" :key="index" class="text">
            <img :src="text.src" alt="" style="width: 90%; margin: 12px 12px 0 12px;">
            <el-button type="success" style="width: 91%; margin: 0 12px 5px 12px;" @click="vote(index)">{{ text.votes }} | 投票</el-button>
          </li>
        </ul>
        
      </div>
    </div>
    <!-- 底部 -->
    <div class="foot">
      <span>别拉了，我是有底线的~</span>
    </div>

    <Foot></Foot>

  </div>
</template>

<script>
  import Foot from '@/components/Footer'
import Swiper from "swiper";
import "swiper/css/swiper.min.css";
export default {
  name: "MyInteraction",
  components:{
          Foot
      },
  data() {
    return {
      activeIndex: "1",
      input2:'',
      title: [
        { icon: "el-icon-data-board", name: "首页", path:'/interaction' },
        { icon: "el-icon-s-data", name: "详情", path:'/detail' },
        { icon: "el-icon-s-grid", name: "更多", path:'/more' },
      ],
      images: [
        require("@/assets/images/spring.jpg"),
        require("@/assets/images/summer.jpg"),
        require("@/assets/images/fall.jpg"),
        require("@/assets/images/winter.jpg"),
      ],
      value2:2024-1-8,
      data:['累计票数','参与项目','累计访问'],
      rule:[
        {icon:"el-icon-time",name:"活动开始:",value:'2024-3-8'},
        {icon:"el-icon-time",name:"活动结束:",value:'2024-4-8'},
        {icon:"el-icon-circle-check",name:"活动规则:",value:'每个账号每天可以投5次，每个项目最多投1次'}
      ],
      ruleImg:[
        {src:require("@/assets/images/spring.jpg"),votes:0,visits:0},
        {src:require("@/assets/images/summer.jpg"),votes:0,visits:0},
        {src:require("@/assets/images/fall.jpg"),votes:0,visits:0},
        {src:require("@/assets/images/winter.jpg"),votes:0,visits:0}
      ],
    }
  },
  methods: {
    back(){
      this.$router.push('/home')
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    vote(index){
      this.ruleImg[index].votes++;
    },
    getValue(index){
      switch(index){
        case 0 :
          return this.ruleImg.reduce((total,text) => total + text.votes, 0);
        case 1 :
          return this.ruleImg.length;
        case 2 :
          return this.ruleImg.reduce((total,text) => total + text.visits, 0);
        default:
          return 0;
      }
    },
    more(){
      this.$router.push('/more')
    }
  },
  mounted() {
    new Swiper(".swiper-container", {
      //   direction: "vertical", // 垂直切换选项
      loop: true, // 循环模式选项

      // 如果需要分页器
      pagination: {
        el: ".swiper-pagination",
      },

      // 如果需要前进后退按钮
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },

      // 图片自动切换
      autoplay: {
        delay: 2000,
        stopOnLastSlide: false,
        disableOnInteraction: true,
      },
    });
  },
};
</script>

<style scoped>
li{
  list-style: none;
}
.total {
  margin: 80px 0 10px 0;
  padding: 0;
  width: 100%;
  background-color: rgb(208, 255, 201);
}
.head {
  position: fixed;
  z-index: 999;
  top: 0;
  width: 100%;
  height: 80px;
  margin: 0 auto;
  text-align: center;
  background-color: green;
  opacity: 0.6;
}
.head .list {
  margin: 0 15%;
  height: 100%;
}
.head .top {
  width: 30%;
  height: 100%;
  float: left;
  list-style: none;
  margin: 0 5px;
}
.head .top a {
  display: block;
  text-decoration: none;
  line-height: 80px;
  color: #000;
}
.head .top a:hover {
  background-color: #67c23a;
  color: #fff;
}
.carousel {
  /* float: left; */
  text-align: center;
  width: 80%;
  height: 550px;
  margin: 10px auto;
  background-color: blanchedalmond;
  border-radius: 8px;
}
.title{
  /* font-family: Impact, sans-serif; */
  font-size: 40px;
  color: #d39696;
  letter-spacing: 0;
  text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135 
}
.swiper-container {
  width: 90%;
  height: 400px;
  margin: 0 auto;
  top: 5%;
}
.swiper-container img{
    width: 35%;
    height: 80%;
}
.data{
  height: 100px;
  width: 80%;
  margin: 10px auto;
  background-color: blanchedalmond;
  border-radius: 8px;
}
.sta{
  line-height: 50px;
}
.rule{
  height: auto;
  width: 80%;
  margin: 0 auto;
  background-color: blanchedalmond;
  border-radius: 8px;
}
.tit{
  color: #67c23a;
  margin: 0 auto;
  text-align: center;
}
.rlist{
  list-style: none;
  padding: 0 10%;
}
.foot{
  width: 100%;
  margin: 0 auto;
  padding: 10px 0;
  text-align: center;
  color: rgb(117, 134, 151);;
}
.vote{
  width: 80%;
  margin: 10px auto;
  /* background-color: blanchedalmond; */
  border-radius: 8px;
}
.paiming{
  width: 100%;
  margin: 5px auto;
}
.search{
  width: 88%;
  
}
.images{
  display: flex;
  width: 100%;
  margin: 10px;
}
.text{
  width: 45%;
  float: left;
  margin: 5px;
  background-color: #fff;
  border-radius: 8px;

}
</style>